<template>
    <div>
        <div>
            <el-input style="width: 150px;float: left"
                      v-model="search"
                      class="search_name"
                      @keyup.native="onSearch()"
                      placeholder="输入保险查询">
            </el-input>
            <el-input style="width: 150px;float: left"
                      v-model="search1"
                      class="search_name"
                      @keyup.native="onSearch()"
                      placeholder="输入业主查询">
            </el-input>
            <el-input style="width: 150px;float: left"
                      v-model="search2"
                      class="search_name"
                      @keyup.native="onSearch()"
                      placeholder="输入楼栋查询">
            </el-input>

            <el-button style="float: left;margin-left: 50px;margin-bottom: 10px"
                       class="el-icon-circle-plus-outline"
                       type="primary" plain
                       @click="dialogVisible = true">添加
            </el-button>
            <el-table :data="users.slice((currentPage-1)*pageSize,currentPage*pageSize)" border stripe>
                <el-table-column label="序号" prop="cid"/>
                <el-table-column label="应收保险" prop="ysbs"/>
                <el-table-column label="实收保险" prop="ssbs"/>
                <el-table-column label="应收养护" prop="ysyh"/>
                <el-table-column label="实收养护" prop="ssyh"/>
                <el-table-column label="应收器材" prop="ysqc"/>
                <el-table-column label="实收器材" prop="ssqc"/>
                <el-table-column label="实收节日费" prop="ysjrf"/>
                <el-table-column label="应收节日费" prop="ssjrf"/>
                <el-table-column label="楼栋" prop="tower.tname"/>
                <el-table-column label="业主" prop="owner.oname"/>
                <el-table-column label="月份" prop="month.mname"/>
            </el-table>
            <!--添加页面-->
            <el-dialog
                    title="添加页面"
                    :visible.sync="dialogVisible"
                    width="30%"
                    @close="cancel">
                <el-form style="width: 40%" :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <!--        <el-form-item label="客户订单编号" prop="id">-->
                    <!--          <el-input v-model="formInline.id" style="width: 300px"></el-input>-->
                    <!--        </el-form-item>-->
                    <!--      </el-form-item>-->
                    <el-form-item label="应收保险" prop="ysbs">
                        <el-input v-model="ruleForm.ysbs" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="实收保险" prop="ssbs">
                        <el-input v-model="ruleForm.ssbs" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="应收养护" prop="ysyh">
                        <el-input v-model="ruleForm.ysyh" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="实收养护" prop="ssyh">
                        <el-input v-model="ruleForm.ssyh" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="应收器材" prop="ysqc">
                        <el-input v-model="ruleForm.ysqc" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="实收器材" prop="ssqc">
                        <el-input v-model="ruleForm.ssqc" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="应收节日费" prop="ysjrf">
                        <el-input v-model="ruleForm.ysjrf" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="实收节日费" prop="ssjrf">
                        <el-input v-model="ruleForm.ssjrf" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="业主" prop="oid">
                        <el-select  v-model="ruleForm.oid" style="width: 300px">
                            <el-option v-for="item in selectList" :key="item.oid" :label="item.oname" :value="item.oid"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="月份" prop="mid">
                        <el-select  v-model="ruleForm.mid" style="width: 300px">
                            <el-option v-for="item in selectList2" :key="item.mid" :label="item.mname" :value="item.mid"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="楼栋" prop="tid">
                        <el-select  v-model="ruleForm.tid" style="width: 300px">
                            <el-option v-for="item in selectList1" :key="item.tid" :label="item.tname" :value="item.tid"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
          <span slot="footer" class="dialog-footer">
            <el-button @click="cancel()" size="medium">取 消</el-button>
            <el-button @click="addUser()" type="primary" size="medium">确 定</el-button>
          </span>
  </span>
            </el-dialog>
        </div>
        <div class="block" style="float: right">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[3, 6, 9, 12]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Qita",
        data() {
            return {
                dialogVisible: false,
                selectList: {oname:'', oid:''},
                selectList1: {tname:'', tid:''},
                selectList2: {mname:'', mid:''},
                pageSize: 3,
                currentPage: 1,
                total: 0,
                search: '',
                search1: '',
                search2: '',
                activeName: 'a',
                radio: '1',
                users: {
                },
                ruleForm:{
                    ysbs:'',
                    ssbs:'',
                    ysyh:'',
                    ssyh:'',
                    ysqc:'',
                    ssqc:'',
                    ysjrf:'',
                    ssjrf:'',
                    oid:'',
                    oname:'',
                    tid:'',
                    tname:'',
                    mid:'',
                    mname:'',
                }
            };
        },
        created() {
            const that = this;
            this.getPages();
            this.axios.get('http://localhost:8082/selectCostList')
                .then(function (response) {
                    console.log(response);
                    that.users = response.data;
                }),this.axios.get('http://localhost:8082/selectOwnerList')
                .then(function (response) {
                    console.log(response);
                    that.selectList = response.data;
                }),
                this.axios.get('http://localhost:8082/selectMonthList')
                    .then(function (response) {
                        console.log(response);
                        that.selectList2 = response.data;
                    }),
                this.axios.get('http://localhost:8082/selectTowerList')
                    .then(function (response) {
                        console.log(response);
                        that.selectList1 = response.data;
                    })
        },
        methods:{
            cancel() {
                this.ruleForm.cid='',
                    this.ruleForm.contractnum='',
                    this.ruleForm.content='',
                    this.ruleForm.contracttime='',
                    this.ruleForm.expire='',
                    this.ruleForm.time='',
                    this.ruleForm.state='',
                    this.ruleForm.money='',
                    this.ruleForm.oid='',
                    this.ruleForm.oname='',
                    this.ruleForm.tid='',
                    this.ruleForm.tname='',
                    this.ruleForm.mid='',
                    this.ruleForm.mname=''
                this.dialogVisible = false;
            },
            addUser() {
                let postData = this.qs.stringify({
                    ysbs: this.ruleForm.ysbs,
                    ssbs: this.ruleForm.ssbs,
                    ysyh: this.ruleForm.ysyh,
                    ssyh: this.ruleForm.ssyh,
                    ysqc: this.ruleForm.ysqc,
                    ssqc: this.ruleForm.ssqc,
                    ysjrf: this.ruleForm.ysjrf,
                    ssjrf: this.ruleForm.ssjrf,
                    oid: this.ruleForm.oid,
                    tid: this.ruleForm.tid,
                    mid: this.ruleForm.mid,
                });
                this.axios({
                    method: 'post',
                    url:'http://localhost:8082/addCost',
                    data:postData
                }).then(response =>
                {
                    this.axios.post('http://localhost:8082/selectCostList').then(response =>
                    {
                        this.tableData = response.data;
                        this.currentPage = 1;
                        this.onSearch()
                        this.cancel()
                        this.$message({
                            type: 'success',
                            message: '已添加!'
                        });
                    }).catch(error =>
                    {
                        console.log(error);
                        this.onSearch()
                    });
                    this.getPages();
                    this.dialogVisible = false
                    console.log(response);
                }).catch(error =>
                {
                    console.log(error);
                    location.reload();
                });
            },
            onSearch() {
                let postData = this.qs.stringify({
                    ysbs: this.search,
                    oname: this.search1,
                    tname: this.search2,
                });
                this.axios({
                    method: 'post',
                    url: 'http://localhost:8082/selectCostList',
                    data: postData
                }).then(response =>
                {
                    this.getPages();
                    this.users = response.data;
                    this.disablePage = true;
                }).catch(error =>
                {
                    console.log(error);
                });
            },
            handleSizeChange(val) {
                this.getPageData();
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.getPageData();
                console.log(this.pageSize);
            },
            handleCurrentChange(val) {
                this.getPageData();
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.getPageData();
                console.log(this.currentPage);
            },
            getPageData() {
                console.log("是否yes");
                let start = (this.currentPage - 1) * this.pageSize;
                let end = start + this.pageSize;
                this.schArr = this.users.slice(start, end);
                this.total = this.users.length;
            },
            getPages() {
                let postData = this.qs.stringify({
                    ysbs: this.search,
                    oname: this.search1,
                    tname: this.search2,
                });
                this.axios({
                    method: 'post',
                    url: 'http://localhost:8082/getCostCount',
                    data: postData
                }).then(response =>
                {
                    this.total = response.data;
                }).catch(error =>
                {
                    console.log(error);
                });
            },
        }
    }
</script>

<style scoped>

</style>
